<template>
  <div class="xiang" :style="{ backgroundImage: `url(${ shopinfo.info && shopinfo.info.poi_back_pic_url})`}">
    <van-nav-bar
  title="店铺详情"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="$router.go(-1)"
/>
    <div class="hang2">
        <img class="logo" :src="shopinfo.info && shopinfo.info.picUrl" alt="">
        <span class="smin">{{(shopinfo.info && shopinfo.info.name)}}</span>
        <van-icon name="like" color="red" size="30" v-if="shoucang" @click="shou1"/>
        <van-icon name="like-o" color="#fff" size="30" v-else @click="shou2"/>
    </div>
    <div class="hang3">
    <span class="iconfont icon-fangdajing">搜索</span>
    <span @click="handclick(index)" v-for="(item,index) in list" :key="index" :class="{active:xiabiao==index}">{{item.text}}</span>
  </div>
  <div class="xuan">
    <div class="left">
        <div @click="handlist(index)" v-for="(item,index) in shopinfo.taglist &&shopinfo.taglist" :key="index" :class="{active:xiabiao2==index}">{{item.name}}</div>
    </div>
    <div class="right">
        <div class="zi">热销</div>
        <div class="ran" v-for="(ite,inde) in shopinfo.taglist &&shopinfo.taglist[xiabiao2].goodlist" :key="inde">
            <div class="dig"><img :src="ite.picture" alt=""></div>
            <div class="nei">
                <div class="h1">{{ite.name}}</div>
                <div class="h2">{{ite.month_saled_content}}&nbsp;&nbsp;{{ite.promotion_info}}&nbsp;&nbsp;{{ite.unit}}</div>
                <div class="h3">
                    <span class="sp1">¥{{ite.min_price}}</span>
                    <span class="sp">+</span>
                </div>
            </div>
        </div>
    </div>
  </div>
  </div>
</template>

<script>
import { shop_shopinfo } from "@/api";
import { Toast } from 'vant';
export default {
  data() {
    return {
        shoucang:false,
        xiabiao:0,
      shopinfo: {},
      list:[
            {id:1,text:'点餐'},
            {id:2,text:'评价4.5'},
            {id:3,text:'商家'},
        ],
        xiabiao2:0
    };
  },
  mounted() {
    shop_shopinfo({ id: this.$route.params.id }).then((res) => {
      if(res.data.code==200){
        this.shopinfo=res.data.shopinfo
      }else{
        alert(res.data.msg)
        this.$router.go(-1)
      }
    });
  },
  methods:{
        handclick(index){
            this.xiabiao=index
        },
        handlist(index){
        this.xiabiao2=index
    },
    shou1(){
        this.shoucang=!this.shoucang
        Toast.fail('取消收藏！');
    },
    shou2(){
        this.shoucang=!this.shoucang
        Toast.success('收藏成功！');
    }
    }
}

</script>

<style scoped>
.xiang {
  
  height: 190px;
  /* line-height: 30px; */
  padding: 10px;
}

.hang2 img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}
.smin{
    font-size: 16px;
    color: white;
    font-weight: bold;
}
.hang3{
    height: 60px;
    line-height: 60px;
    font-size: 22px;
    padding: 10px;
    color: white;
}
.hang3 span:nth-child(1){
    display: inline-block;
    width: 100px;
    height: 40px;
    border-radius: 40px;
    background-color: rgba(235, 233, 233, 0.267);
    text-align: center;
    line-height: 40px;
}
.hang3 span{
    margin-right: 20px;
}
.hang3 span.active{
    display: inline-block;
    color: #138fe9;
    border-bottom: 2px solid #138fe9;
    height: 40px;
    line-height: 40px;
}
.xuan{
    display: flex;
    /* padding: 0 20px; */
    margin-top: 20px;
}
.left{
    width: 130px;
    text-align: center;
}
.left .active{
    background-color: #eee;
    color: red;
}
.left div{
    height: 60px;
    line-height: 60px;
}
.zi{
    font-size:20px ;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
}
.right{
    flex: 1;
}
.ran{
    display: flex;
    height: 100px;
    margin: 20px 0;
}
.h1{
    font-weight: bold;
}
.h2{
    font-size: 12px;
    color: rgb(116, 112, 112);
    margin: 10px 0;
}
.nei{
    flex: 1;
}
.dig{
width: 100px;
height: 100px;
}
img{
 width: 100%;
}
.sp{
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    text-align: center;
    line-height: 22px;
    background-color: blue;
    font-size: 20px;
    font-weight: bold;
    color: white;
    float: right;
}
.sp1{
    float: left;
    color: red;
}
.hang2 i{
    margin-left: 40px;
}

</style>